
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>
</head>
<style>
    /* 选中ul下方的第一个li */
    ul li:first-child{
        background-color: red;
    }
     /* 选中ul下方的第二个li */
    ul li:nth-child(2) {
        background-color: orange;
    } 
    /* 选中ul下方的第三个li */
    ul li:nth-child(3) {
        background-color: blue;
    } 
    /* 选中ul下方的第四个li */
    ul li:nth-child(4) {
        background-color: yellow;
    }
    /* 选中偶数位置上的li */
    ul li:nth-child(even)
    {
        height: 100px;
    }
    /* 选中奇数位置上的li */
    ul li:nth-child(odd)
    {
        width: 100px;
    }


    /* div p:first-child{
        color: yellow;
    }
    div h1:nth-child(2){
        color: violet;
    }
    div span:nth-child(3){
        color: tomato;
    } */

    /* 先选中div 然后在div下方选择所有的p标签 最后找出p标签中第一个出现的元素 */
    div p:first-of-type{
        color: tomato;
    }
    /* 先选中div 然后在div下方选择所有的p标签 最后找出p标签中第二个出现的元素 */
    div p:nth-of-type(2){
        color:pink;
    }
      /* 先选中div 然后在div下方选择所有的h1标签 最后找出h1标签中第二个出现的元素 */
    div h1:first-of-type{
        color: #020;
    }
</style>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <div>
        <p>段落</p>
        <p>段落</p>
        <h1>标题</h1>
        <span>列表</span>
    </div>
</body>
</html>